<template>
  <div style="height: 100%; max-height: 100%" class="h5subjectsBoxs">
    <navconH5 :leftShow="true" texts="负责人管理"></navconH5>
    <div
      class="example-search"
      style="background-color: rgba(255, 255, 255, 0); padding: 10px"
    >
      <t-search
        placeholder="负责人名称"
        style="width: 100%"
        v-model="formInline.username"
        @blur="search"
        @clear="search"
      ></t-search>
      <div class="addViewstop" @click="endlist()">新建 <span>+</span></div>
    </div>
    <div class="cut">
      <div class="cut_text_one">{{ cut ? "线上" : "在地" }}区域负责人</div>
      <div class="cut_sw">
        <div
          class="cut_sw_no"
          :class="cut ? 'cut_sw_ok' : ''"
          @click="cuttab(true)"
        >
          线上
        </div>
        <div
          class="cut_sw_no"
          :class="!cut ? 'cut_sw_ok' : ''"
          @click="cuttab(false)"
        >
          在地
        </div>
      </div>
    </div>
    <div class="subiectsList" ref="scrollContainer" @scroll="handleScroll">
      <div
        class="subiectsList_boxs"
        v-for="(item, index) in tableData"
        :key="index"
      >
        <div style="width: 100%; display: flex">
          <div class="subiectsList_boxs_twos">
            <t-avatar
              class="avatar-example external-class-content"
              aria-label="字符头像"
            >
              {{ item.username[0] }}</t-avatar
            >
            <div class="subiectsList_boxs_ones">
              <p class="subiectsList_boxs_text">
                {{ item.username }}
              </p>
              <p class="subiectsList_boxs_mobile">{{ item.mobile }}</p>
            </div>
          </div>

          <div class="right_icons_list">
            <div class="right_icons_list_item">
              <el-icon class="item_icon" @click="endlist(item)"
                ><EditPen
              /></el-icon>
            </div>
            <div class="right_icons_list_item right_icons_list_item2">
              <el-icon class="item_icon item_icon2" @click="deletes(item)"
                ><CircleCloseFilled
              /></el-icon>
            </div>
          </div>
        </div>
        <div class="listfooter">
          <div class="listfooter_view">
            <span class="listfooter_view_tag"> 创建日期:</span>
            {{ item.createtime }}
          </div>
          <div class="listfooter_view">
            <span class="listfooter_view_tag"> 更新日期: </span>
            {{ formatDateTime(item.updatetime) }}
          </div>
        </div>
      </div>
      <!-- 加载提示 -->
      <div v-if="isLoading" class="loading-text">加载中...</div>
      <div v-if="isEnd" class="loading-text">没有更多数据了</div>
    </div>
    <staffShow ref="listShows" :titles="cuttext()" @endlists="addlists"></staffShow>
  </div>
</template>
      
<script setup>
import { ref, reactive, onMounted, inject } from "vue";
import navconH5 from "@/components/navconH5.vue";
import { Message } from "tdesign-mobile-vue";
import { useRouter, useRoute } from "vue-router";
import { useMutitabsStore } from "@/store/mutitabs";
import {
  zregionuserList,
  zregionuserDel,
  zregionuserAdd,
  zregionuserUpdate,
} from "@/api/api"; //在线
import {
  regionuserList,
  regionuserDel,
  regionuserAdd,
  regionuserUpdate,
} from "@/api/api"; //在地

import { setStorage, getStorage } from "@/utils/util";
import dayjs from "dayjs";

import staffShow from "@/components/h5com/shool/staffShow.vue";
const route = useRoute(); // 使用 useRoute 获取当前路由信息
const router = useRouter(); //获取当前路由
const $dialog = inject("$dialog");
const info = JSON.parse(getStorage("userinfo"));
const userId = Number(JSON.parse(getStorage("userId")));
console.log(userId, "-------userId");
const userInfo = ref(Number(JSON.parse(getStorage("groupId")))); //权限
const formInline = ref({ page: 1, per_page: 20 }); //数据引用分页
const Twostab = ref({ page: 1, per_page: 20, total: 0 }); //重置数据分页
const isLoading = ref(false);
const isEnd = ref(false);
const tableData = ref([]); //列表数据
const scrollContainer = ref(null); // 滚动容器
const listShows = ref(null); //弹窗
const cut = ref(true); //线上or线下
const cuttext=()=>{
    return cut.value ? "线上" : "在地";
}
// 获取数据
const getdata = () => {
  if (isLoading.value || isEnd.value) return; // 防止重复加载
  isLoading.value = true;
  let userList = cut.value ? zregionuserList : regionuserList;
  userList(formInline.value)
    .then((res) => {
      if (res.code == 1) {
        if (res.data.data.length === 0) {
          isEnd.value = true; // 没有更多数据
        } else {
          tableData.value = [...tableData.value, ...res.data.data]; // 追加数据
          formInline.value.page++; // 增加分页
        }
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
};
const cuttab = (val) => {
  // 线上线下按钮切换
  cut.value = val;
  search();
};
const formatDateTime = (time) => {
  return dayjs.unix(time).format("YYYY-MM-DD HH:mm");
};
// 搜索
const search = () => {
  formInline.value = { ...formInline.value, ...Twostab.value };
  tableData.value = []; // 清空旧数据
  isEnd.value = false; // 重置加载状态
  getdata();
};
const endlist = (row) => {
  listShows.value.showends(row, row ? "编辑" : "新增");
};
// 删除
const deletes = (row) => {
  $dialog.confirm({
    title: "删除警告",
    content: `是否删除${row.username}？`,
    confirmBtn: { content: "确认", theme: "danger" },
    cancelBtn: "取消",
    onConfirm: () => {
      let userDel = cut.value ? zregionuserDel : regionuserDel;
      userDel({ id: row.id })
        .then((res) => {
          if (res.code == 1) {
            Message.success({
              content: "删除成功",
              placement: "center",
            });
            search();
          }
        })
        .catch((error) => {
          console.log(error, "-------报错");
        });
    },
  });
};
const addlists = (row) => {
  //    添加或者编辑
  let objs = row;
  if (row.id) {
    objs.id = row.id;
    let userUpdate = cut.value ? zregionuserUpdate : regionuserUpdate;
    userUpdate(objs)
      .then((res) => {
        if (res.code == 1) {
          console.log("编辑成功");
          let index = tableData.value.findIndex((item) => item.id == objs.id);
          // 赋值数据 新数据覆盖旧数据
          tableData.value[index] = { ...tableData.value[index], ...objs };
          Message.success(res.msg);
          // search();
        } else {
          Message.error(res.msg);
        }
      })
      .catch((error) => {
        Message.error("操作失败！");
      });
  }
  if (!row.id) {
    let userAdd = cut.value ? zregionuserAdd : regionuserAdd;
    userAdd(objs)
      .then((res) => {
        if (res.code == 1) {
          console.log("添加成功");
          Message.success(res.msg);
          search();
        } else {
          Message.error(res.msg);
        }
      })
      .catch((error) => {
        Message.error("操作失败！");
      });
  }
};

// 触底加载
const handleScroll = () => {
  const container = scrollContainer.value;
  if (container) {
    const { scrollTop, clientHeight, scrollHeight } = container;
    if (
      scrollTop + clientHeight >= scrollHeight - 10 &&
      !isLoading.value &&
      !isEnd.value
    ) {
      getdata();
    }
  }
};

// 初始化加载数据
onMounted(() => {
  getdata();
});
</script>
      
      <style scoped lang="scss">
.example-search {
  display: flex;
  align-items: center;
}
.h5subjectsBoxs {
  display: flex;
  flex-direction: column;
}
.subiectsList {
  overflow-y: auto;
  padding: 0 10px;
  height: calc(100vh - 100px); // 设置滚动容器高度
}
.subiectsList_boxs {
  background-color: #fff;
  border-radius: 10px;
  width: 100%;
  //   display: flex;
  padding: 15px;
  box-sizing: border-box;
  //   display: flex;
  align-items: center;
  margin: 10px 0;
  .subiectsList_boxs_text {
    width: 100%;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏超出的内容 */
    text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
    font-size: 16px;
    font-weight: 500;
  }
}
.right_icons_list {
  display: flex;
  .right_icons_list_item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background-color: rgba(210, 248, 231, 1);
    border-radius: 50%;
    margin: 0 5px;
  }
  .item_icon {
    color: rgba(73, 185, 173, 1);
    font-size: 15px;
  }
  .right_icons_list_item2 {
    background-color: rgb(248, 211, 210);
  }
  .item_icon2 {
    color: rgb(185, 58, 41);
  }
}
.loading-text {
  text-align: center;
  padding: 10px;
  color: #999;
  font-size: 12px;
}

.addViewstop {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 70px;
  color: rgba(17, 20, 31, 1);
  font-size: 14px;
  font-weight: 500;
  span {
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(210, 248, 231, 1);
    color: rgba(73, 185, 173, 1);
    font-size: 14px;
    margin-left: 5px;
  }
}
.subiectsList_boxs_twos {
  width: 100%;
  display: flex;
  .subiectsList_boxs_text {
    font-size: 16px;
  }
  .subiectsList_boxs_mobile {
    font-size: 12px;
    color: rgba(79, 85, 103, 1);
  }
}
.subiectsList_boxs_ones {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
}

.listfooter {
  display: flex;
  font-size: 10px;
  .listfooter_view {
    margin: 10px 10px;
    margin-bottom: 0;
    .listfooter_view_tag {
      background-color: rgba(79, 85, 103, 0.06);
      padding: 1px 0;
      color: rgba(79, 85, 103, 1);
    }
  }
}
.cut {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  .cut_text_one {
    font-size: 16px;
    font-weight: 500;
    color: rgba(17, 20, 31, 1);
  }
  .cut_sw {
    background-color: #fff;
    border-radius: 50px;
    width: 100px;
    padding: 5px;
    height: 33px;
    box-sizing: border-box;
    display: flex;
    .cut_sw_no {
      width: 50%;
      font-size: 12px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50px;
      color: rgba(181, 181, 181, 1);
    }
    .cut_sw_ok {
      background-color: rgba(73, 185, 173, 1);
      color: #fff;
    }
  }
}
</style>